<template>
    <view class="contanier">
        <view class="input-wrap">
            <uni-easyinput
                v-model="formData.region"
                placeholder="请选择地区"
                :disabled="true"
            ></uni-easyinput>

            <!-- 蒙层区域 -->
            <view class="mask" @click="handleOpenRegion"></view>
        </view>

        <view class="btn-wrap">
            <text class="btn" @click="handleSave">保 存</text>
        </view>
        <!-- <uv-picker
            ref="picker"
            :confirmColor="global.THEME_COLOR"
            :activeColor="global.THEME_COLOR"
            :columns="regionList"
            keyName="name"
            @change="change"
            @confirm="confirm"
            :loading="loading"
        >
		</uv-picker> -->

        <TridentRegionPicker
			ref="regionRef"
			:regionList="regionList"
			:column="column"
			:default-value="defaultValue"
			:mask-close-able="maskCloseAble"
			:visible="visible"
			@confirm="confirm"
			@cancel="cancel"
		/>
    </view>
</template>

<script lang="ts" setup>
import { useCommonStore, useUserStore } from '@/stores'
import type { RegionTree } from '@/types/common'
import type { EditUserParams } from '@/types/user'
import { onShow } from '@dcloudio/uni-app'
import { reactive, ref } from 'vue'



// --------------- 定义全局变量开始 ---------------
// 用户存储
const userStore = useUserStore()

// 公共存储
const commonStore = useCommonStore()

const regionRef = ref()
const visible = ref(false)
const maskCloseAble = ref(true)
const column = ref(3)

// 默认选中
const defaultValue = ref<number[]>([
    userStore.profile.user?.province_id as never,
    userStore.profile.user?.city_id as never,
    userStore.profile.user?.district_id as never
])

const regionList = ref<RegionTree[]>([])
// --------------- 定义全局变量结束 ---------------



onShow(async () => {
    await getRegions()

    regionRef.value.init()
})



// --------------- 处理打开功能开始 ---------------
const handleOpenRegion = () => {
    visible.value = true
}
// --------------- 处理打开功能结束 ---------------



// --------------- 处理保存功能开始 ---------------
// 表单数据
const formData = reactive<EditUserParams>({
    province_id: userStore.profile.user?.province_id,
    city_id: userStore.profile.user?.city_id,
    district_id: userStore.profile.user?.district_id,
    region: userStore.profile.user?.region,
})

// 保存数据
const handleSave = async () => {
    await userStore.editOtherInfo(formData)
    uni.showToast({
        title: '修改成功',
        duration: 1000
    })

    setTimeout(() => {
        uni.navigateTo({url: '/pagesUser/user_set/index'})
    }, 100)
}
// --------------- 处理保存功能结束 ---------------



// --------------- 获取地区数据开始 ---------------
const getRegions = async () => {
    regionList.value = await commonStore.getRegionTree()
}
// --------------- 获取地区数据结束 ---------------



const confirm = (val: any) => {
    formData.province_id = val.provinceId
    formData.city_id = val.cityId
    formData.district_id = val.districtId
    formData.region = val.regionName
	visible.value = false
}

const cancel = () => {
	visible.value = false
}
</script>

<style scoped lang="scss">
.contanier {
    padding: 10rpx;
    .input-wrap {
        position: relative;
        .mask {
            width: 100%;
            height: 65rpx;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            opacity: 0;
            z-index: 100;
        }
    }
    .btn-wrap {
        padding-top: 20rpx;
        display: flex;
        justify-content: center;
        .btn {
            display: block;
            width: 700rpx;
            height: 70rpx;
            line-height: 70rpx;
            border-radius: 35rpx;
            color: #fff;
            text-align: center;
            background-color: $uni-color-primary;
        }
    }
}
</style>